<template>
  <h3>会员中心</h3>
  <section class="main-msg">
    <!-- 有 token 的状态 -->
    <div class="main-msg-1" v-if="token">
      <div class="main-msg-1-t">
        <router-link to="/member" class="main-msg-img">放头像</router-link>
        <div>
          <span>吴彦祖</span>
          <p>普通会员</p>
        </div>
      </div>
      <div class="main-msg-1-b">
        <span>黑金卡</span>
        <i>立即开通</i>
      </div>
    </div>

    <!-- 没有 token 的状态 -->
    <div class="main-msg-2" v-else>
      <router-link to="/login" class="main-msg-2-1">
        <van-icon name="manager-o" />
      </router-link>
      <router-link to="/login" class="main-msg-2-2">立即登录</router-link>
    </div>
  </section>
  <section class="m-dingdan">
    <div class="m-diandan-1"><span>我的订单</span> <i>></i></div>
    <van-grid>
      <van-grid-item icon="balance-pay" text="待付款" />
      <van-grid-item icon="point-gift-o" text="待发货" />
      <van-grid-item icon="gold-coin-o" text="待收货" />
      <van-grid-item icon="gold-coin-o" text="已收货" />
    </van-grid>
  </section>
  <section class="m-caidan">
    <van-grid>
      <van-grid-item icon="balance-pay" text="我的表单" />
      <van-grid-item icon="gold-coin-o" text="我的会员卡" />
      <van-grid-item icon="gold-coin-o" text="我的积分" />
      <van-grid-item icon="gold-coin-o" text="我的优惠券" />
      <van-grid-item icon="gold-coin-o" text="我的余额" />
      <van-grid-item icon="gold-coin-o" text="我的砍价" />
      <van-grid-item icon="gold-coin-o" text="推广员中心" />
      <van-grid-item icon="gold-coin-o" text="收货人信息" />
      <van-grid-item icon="gold-coin-o" text="退出登录" v-if="token" />
    </van-grid>
  </section>
  <p>由 1000Feng 科技技术提供支持</p>
</template>
<script>
import { loginApi } from "../../../utils/api";
export default {
  setup() {
    const token = localStorage.getItem("token");
    return {
      token,
      loginApi,
    };
  },
};
</script>
<style lang="less" scoped>
h3 {
  text-align: center;
  line-height: 40px;
  font-size: 18px;
  border-bottom: 1px solid #ccc;
}
.main-msg {
  height: 120px;
  background-color: #fff;
  background-color: orange;
  //   有 token 的样式
  > .main-msg-1 {
    width: 100%;
    > .main-msg-1-t {
      display: flex;
      align-items: center;
      > .main-msg-img {
        width: 50px;
        height: 50px;
        background-color: #fff;
        border-radius: 50%;
        margin-left: 30px;
        margin-top: 20px;
      }
      > div {
        font-size: 14px;
        margin-top: 20px;
        margin-left: 10px;
        > span {
          color: #fff;
        }
        > p {
          display: block;
          margin-top: 8px;
          height: 18px;
          width: 80px;
          line-height: 18px;
          text-align: center;
          border-radius: 5px;
          background-color: rgb(255, 231, 210);
          font-size: 10px;
          color: rgb(168, 127, 113);
        }
      }
    }
    > .main-msg-1-b {
      width: 90%;
      margin: 15px auto 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 35px;
      background-color: rgb(64, 64, 64);
      border-radius: 10px 10px 0 0;
      font-size: 12px;
      color: rgb(243, 196, 133);
      > span {
        margin-left: 30px;
      }
      > i {
        margin-right: 30px;
        width: 80px;
        height: 20px;
        background-color: rgb(243, 227, 205);
        text-align: center;
        line-height: 20px;
        border-radius: 15px;
        color: rgb(88, 60, 20);
      }
    }
  }
  //   没有 token 的样式
  > .main-msg-2 {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;

    > .main-msg-2-1 {
      width: 50px;
      height: 50px;
      background-color: #fff;
      border-radius: 50%;
      margin-left: 30px;
      > .van-icon {
        width: 100%;
        height: 100%;
        text-align: center;
        line-height: 50px;
      }
    }
    > .main-msg-2-2 {
      font-size: 14px;
      margin-left: 5px;
      color: #fff;
    }
  }
}
.m-dingdan {
  padding: 12px;
  width: 100%;
  border-radius: 10px;
  > .m-diandan-1 {
    width: 100%;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    border-bottom: 1px solid rgba(200, 200, 200, 0.6);
    border-radius: 8px 8px 0 0;
    > span {
      padding: 10px;
    }
    i {
      padding: 10px;
    }
  }
}
.m-caidan {
  padding: 12px;
  width: 100%;
  border-radius: 10px;
}
p {
  font-size: 10px;
  text-align: center;
  color: #ccc;
}
</style>
